<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>设备装置</title>
<!--   <th:block layout:fragment="head-include">
  </th:block> -->
</head>

<body>
	<section class="content-header">
      <row>
         <ol class="breadcrumb">
	        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
	        <li class="active"><i class="fa  fa-cubes"></i>设备管理</li>
	      </ol>
      </row>    
    </section>
  <section layout:fragment="content" class="content">
    <div class="row">
      <!-- 新增 -->
      <div class="modal fade" id="deviceModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
        <div class="modal-dialog">
          <div class="box box-primary">
            <div class="box-header with-border">
              <button type="button" class="close closePop" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="body-title" id="titelTag" th:attr="save='增加',update='编辑'">Add</h4>
            </div>
            <div class="box-body">
              <!-- The form is placed inside the body of modal -->
              <form id="deviceForm" method="post" class="form-horizontal" th:action="@{save}" th:attr="save=@{save},update=@{update}" autocomplete="off">
                <div class="col-sm-6">
                  <input type="hidden" name="id" />
                  <!-- 								设备编码 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="设备编码">设备编码</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="devCode" th:attr="data-fv-regexp-message='设备编码不能为空'" data-fv-regexp="true" data-fv-regexp-regexp="^[0-9a-zA-Z\-\_]+$" />
                    </div>
                  </div>
                  <!-- 								设备类型 -->
                  <div class="form-group has-feedback">
                    <label class="col-xs-4 control-label" th:text="设备类型">deviceType</label>
                    <div class="col-xs-8">
                      <select class="form-control" name="deviceTypeId" id="deviceTypeSelect">
                        <option th:each="item,iterStat : ${deviceTypes}" th:attr="value=${item.id},code=${item.deviceTypeId},selected=${item.deviceTypeId}==${deviceTypeId}?'Selected'" th:text="${item.deviceTypeName}">1</option>
                      </select>
                    </div>
                  </div>
                  <!-- 								安装地址 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="安装地址">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="address" />
                    </div>
                  </div>
                  <!-- 安装场所 -->
<!--                   <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="安装场所">fixedPlace</label>
                    <div class="col-xs-8">
                      <select class="form-control" name="fixedPlace" id="fixedPlace">
                        <option th:attr="value=学校" selected>学校</option>
                        <option th:attr="value=公共区域">公共区域</option>
                        <option th:attr="value=网吧">网吧</option>
                        <option th:attr="value=家用">家用</option>
                        <option th:attr="value=饭店">饭店</option>
					  </select>
                    </div>
                  </div>  -->
                  <!-- 								纬度 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="纬度">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="longitude" />
                    </div>
                  </div>
                  <!-- 								安装日期 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="安装日期">name</label>
                    <div class="col-xs-8 date" data-provide="datepicker">
                      <div class=" input-group">
                        <div class="input-group-addon">
                          <span class="fa fa-calendar"></span>
                        </div>
                        <input type="text" class="form-control pull-right" name="installationDate">
                      </div>
                    </div>
                  </div>
                  <!-- 								联系人 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="联系人">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="linkMain1" />
                    </div>
                  </div>
                  <!-- 								联系人 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="联系人">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="linkMain2" />
                    </div>
                  </div>
                  <!-- 								联系人 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="联系人">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="linkMain3" />
                    </div>
                  </div>
                  <!-- 								联系人 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="联系人">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="linkMain4" />
                    </div>
                  </div>
                  <!-- 								保养日期 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="保养日期">name</label>
                    <div class="col-xs-8 date" data-provide="datepicker">
                      <div class=" input-group">
                        <div class="input-group-addon">
                          <span class="fa fa-calendar"></span>
                        </div>
                        <input type="text" class="form-control pull-right" name="maintenanceDate">
                      </div>
                    </div>
                  </div>
                  <!-- 								生产日期 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="生产日期">name</label>
                    <div class="col-xs-8 date" data-provide="datepicker">
                      <div class=" input-group">
                        <div class="input-group-addon">
                          <span class="fa fa-calendar"></span>
                        </div>
                        <input type="text" class="form-control pull-right" name="productionDate">
                      </div>
                    </div>
                  </div>
                  <!-- 							备注 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="备注">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="remark" />
                    </div>
                  </div>
                </div>
                <!-- right col -->
                <div class="col-sm-6">
                  <!-- 								是否启用 -->
                  <div class="form-group has-feedback">
                    <label class="col-xs-4 control-label" th:text="是否启用">role</label>
                    <div class="col-xs-8">
                      <select class="form-control" name="usestatus" id="usestatus">
                        <option th:attr="value=1" selected>启用</option>
                        <option th:attr="value=0">停用</option>
                        <!-- 											<option th:each="item,iterStat : ${roles}"  -->
                        <!-- 												th:attr="value=${item.id},code=${item.code},selected=${item.id}==${roleId}?'Selected'"  -->
                        <!-- 											th:text="${item.name}">1</option> -->
                      </select>
                    </div>
                  </div>
                  <!-- 								设备名称 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="设备名称">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="deviceName" />
                    </div>
                  </div>
                  <!-- 								生产厂家-->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="生产厂家">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="manufacturer" />
                    </div>
                  </div>
                  <!-- 								经度-->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="经度">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="latitude" />
                    </div>
                  </div>
                  <!-- 								截止日期 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="截止日期">name</label>
                    <div class="col-xs-8 date" data-provide="datepicker">
                      <div class=" input-group">
                        <div class="input-group-addon">
                          <span class="fa fa-calendar"></span>
                        </div>
                        <input type="text" class="form-control pull-right" name="deadline">
                      </div>
                    </div>
                  </div>
                  <!-- 								联系电话 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="联系电话">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="linkPhone1" />
                    </div>
                  </div>
                  <!-- 								联系电话 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="联系电话">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="linkPhone2" />
                    </div>
                  </div>
                  <!-- 								联系电话 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="联系电话">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="linkPhone3" />
                    </div>
                  </div>
                  <!-- 								联系电话 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="联系电话">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="linkPhone4" />
                    </div>
                  </div>

                  <!-- 								视频url -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="视频url">url</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="cameraUrl" />
                    </div>
                  </div>
                  <!-- 								视频用户名 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="视频用户">username</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="cameraUser" />
                    </div>
                  </div>
                  <!-- 								视频密码 -->
                  <div class="form-group">
                    <label class="col-xs-4 control-label" th:text="视频密码">name</label>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" name="cameraPassowrd" />
                    </div>
                  </div>
                </div>
                <div style="clear:both"></div>
                <div class="modal-footer  text-center">
                  <div class="text-center">
                    <button type="submit" class="btn btn-primary closePop" th:text="确认">ok</button>
                    <button type="button" class="btn btn-default closePop" data-dismiss="modal" th:text="取消">Cancel</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      
      
      
      
      
      
      <div class="col-md-12">
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">设备装置</h3>
            <div class="box-tools">
              <button type="button" class="btn btn-primary btn-sm" id="popButton" data-toggle="modal" data-target="#deviceModal"><i class="fa  fa-plus"></i>&nbsp;&nbsp添加设备装置</button>
            </div>
          </div>
          <div class="box-body no-padding">
            <table class="table table-striped table-bordered table-hover dataTable">
              <thead>
                <tr class="bg-light-blue disabled">
                  <th>
                    序号
                  </th>
                  <th>
                    设备编号
                  </th>
                  <th>
                    设备类型
                  </th>
                  <th>
                    使用状态
                  </th>
                  <th>
                    设备名称
                  </th>
                  <th>
                    安装地址
                  </th>
<!--                   <th>
                    安装场所
                  </th> -->
                  <th>
                    安装日期
                  </th>
                  <th>
                    经度
                  </th>
                  <th>
                    纬度
                  </th>
                  <th>
                    保养日期
                  </th>
                  <th>
                    联系人
                  </th>
                  <th>
                    联系人电话
                  </th>
                  <th>
                    备注
                  </th>
                  <th>
                    操作
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr th:each="device,iterStat : ${devices}">
                  <!-- <td class="text-center"  th:text="${iterStat.count}">0</td>	 -->
                  <td th:text="${iterStat.count}">0</td>
                  <td th:text="${device.devCode}"></td>
                  <td th:text="${device.deviceType}?${device.deviceType.deviceTypeName}:''"></td>
                  <td th:text="${device.usestatus}==1?'正常使用':'停用'">使用情况</td>
                  <td th:text="${device.deviceName}"></td>
                  <td th:text="${device.address}"></td>
                  <!-- <td th:text="${device.fixedPlace}"></td> -->
                  <td th:text="${device.installationDate}"></td>
                  <td th:text="${device.latitude}"></td>
                  <td th:text="${device.longitude}"></td>
                  <td th:text="${device.maintenanceDate}"></td>
                  <td th:text="${device.linkMain1}"></td>
                  <td th:text="${device.linkPhone1}"></td>
                  <td th:text="${device.remark}"></td>
                  <td>
                    <a class="editOne btn btn-box-tool" th:title="编辑" th:attr="dataId=${device.id}">
											<i class="fa fa-edit"></i>
										</a>
                    <a class="delOne btn btn-box-tool" th:title="删除" th:attr="dataId=${device.id}">
											<i class="fa fa-minus"></i>
										</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除 -->
    <div class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>One fine body&hellip;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <script th:inline="javascript">
    $('.date').datepicker({
      language: "zh-CN",
      autoclose: true,
      startView: 0,
      format: "yyyy-mm-dd",
      clearBtn: false,
      todayBtn: true
    });

    $(function () {
      //列表界面点击删除按钮删除用户
      $(".delOne").click(function () {
        var obj = $(this);
        winTip.confirmAndTitle("提示", "确认要删除吗？", function (result) {
          if (!result) {
            return;
          }
          var id = obj.attr("dataId");
          $.ajax({
            url: "device/del/" + id,
            type: 'POST',
            success: function (result) {
              if (result.status == 200) {
                window.location.reload();
              } else {
                winTip.alert(result.message);
              }
            }

          });
        })
      })
      //列表界面点击编辑按钮编辑用户信息
      $(".editOne").click(function () {
        var obj = $(this);
        var id = obj.attr("dataId");
        $.ajax({
          url: "device/get/" + id,
          type: 'POST',
          success: function (result) {
            if (result.status == 200) {
              var obj = result.data;
              $("#popButton").click();
              $("#titelTag").text("编辑");
              $("#deviceForm input[name='id']").val(obj.id);
              $("#deviceForm input[name='devCode']").val(obj.devCode);
              $("#deviceForm select[name='usestatus']").val(obj.usestatus);
              
              if (obj.deviceType)
                $("#deviceForm select[name='deviceTypeId']").val(obj.deviceType.id);
              $("#deviceForm input[name='deviceName']").val(obj.deviceName);
              $("#deviceForm input[name='address']").val(obj.address);
              /* $("#deviceForm select[name='fixedPlace']").val(obj.fixedPlace); */
              $("#deviceForm input[name='installationDate']").val(obj.installationDate);
              $("#deviceForm input[name='deadline']").val(obj.deadline);
              $("#deviceForm input[name='manufacturer']").val(obj.manufacturer);
              $("#deviceForm input[name='productionDate']").val(obj.productionDate);
              $("#deviceForm input[name='batch']").val(obj.batch);
              $("#deviceForm input[name='latitude']").val(obj.latitude);
              $("#deviceForm input[name='longitude']").val(obj.longitude);
              $("#deviceForm input[name='maintenanceDate']").val(obj.maintenanceDate);
              $("#deviceForm input[name='linkMain1']").val(obj.linkMain1);
              $("#deviceForm input[name='linkPhone1']").val(obj.linkPhone1);
              $("#deviceForm input[name='linkMain2']").val(obj.linkMain2);
              $("#deviceForm input[name='linkPhone2']").val(obj.linkPhone2);
              $("#deviceForm input[name='linkMain3']").val(obj.linkMain3);
              $("#deviceForm input[name='linkPhone3']").val(obj.linkPhone3);
              $("#deviceForm input[name='linkMain4']").val(obj.linkMain4);
              $("#deviceForm input[name='linkPhone4']").val(obj.linkPhone4);
              $("#deviceForm input[name='remark']").val(obj.remark);
              $("#deviceForm input[name='cameraUrl']").val(obj.cameraUrl);
              $("#deviceForm input[name='cameraUser']").val(obj.cameraUser);
              $("#deviceForm input[name='cameraPassowrd']").val(obj.cameraPassowrd);
            } else {
              winTip.alert(result.message);
            }
          }

        });
      })

      $("#popButton").click(function () {
        $("#titelTag").text($("#titelTag").attr("save"));

        $("#deviceForm input[name='id']").val("");
        $("#deviceForm input[name='devCode']").val("");


        //customUtil.initPositionDialog($('#peopleModal'),525,'input[name="userName"]');
        //$("#deviceForm input[name='userName']").focus();					
      })
      $(".closePop").click(function () {

      })

      $("#deviceForm").bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
          devCode: {
            message: '设备编号验证失败',
            validators: {
              notEmpty: {
                message: '设备编号不能为空'
              },
              regexp: {
                regexp: /^[a-zA-Z0-9_]+$/,
                message: '设备编号只能包含大写、小写、数字和下划线'
              }
            }
          },
          deviceTypeId: {
            validators: {
              notEmpty: {
                message: '设备类型不能为空'
              }
            }
          },
          deviceName: {
            validators: {
              notEmpty: {
                message: '设备名称不能为空'
              }
            }
          },
          address: {
            validators: {
              notEmpty: {
                message: '安装地址不能为空'
              }
            }
          },
/*            fixedPlace: {
              validators: {
                notEmpty: {
                  message: '安装场所不能为空'
                }
              }
            }, */
          installationDate: {
            validators: {
              notEmpty: {
                message: '安装日期不能为空'
              }
            }
          },
          latitude: {
            validators: {
              notEmpty: {
                message: '经度不能为空'
              }
            }
          },
          longitude: {
            validators: {
              notEmpty: {
                message: '纬度不能为空'
              }
            }
          }
        }
      }).on("success.form.bv", function (e) {
        e.preventDefault();
        var $form = $(e.target);
        // Use Ajax to submit form data
        var nextUrl;
        //if($("#deviceForm input[name='id']").val() == '') {
        nextUrl = "/device/save"; // + $form.attr('save');
        //} else {
        //	nextUrl = "/device/" + $form.attr('update');
        //}
        $.ajax({
          url: nextUrl,
          type: 'POST',
          data: $form.serialize(),
          success: function (result) {
            if (result.status == 200) {
              //winTip.alert([[#{opt.submitSuccess}]], function() {
              //window.location.reload();
              deviceList ();
              $('body').removeClass('modal-open'); 
              $('modal').removeClass('in');
              $('.modal-backdrop .fade').removeClass("in");
              $('body').css('background-color','rgba(0,0,0,0)') 
              $('#deviceModal').modal('hide')
              $(".modal-backdrop").remove();
              //});
            } else {
              winTip.alert(result.message);
            }
          }

        });
      });
      
    });
    </script>
  </section>
</body>

</html>
